<%@ page contentType="text/html; charset=UTF-8" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<title>learngoApp</title>
<style type="text/css">
body {
	display:block;
	color:#3c3c3c;
	font-family: sans-serif;
	font-size:12px;
	margin:auto;
	width:540px;
}
a:link, a:visited {
	text-decoration: none;
	font-family: sans-serif;
	color:#3c3c3c;
	border: 2px solid #b3b3b3;
	border-radius: 15px;
	background: #fcfcfc;
	width:36px;
	height:16px;
	padding:5px 10px 5px 10px;
	margin:5px;
}
.no-touch a:hover, a:active {
	color:#3c3c3c;
	background:#92e8ff;
}
[id^="example9-"]{
	font-family: sans-serif;
	color:#3c3c3c;
	background: #fcfcfc;
	border: 2px solid #b3b3b3;
	border-radius: 15px;
	//
	text-decoration: none;
	width:450px;
	height:150px;
	padding:10px 0px 5px 15px;
	margin:10px;
	font-size:20px;
}
#example9-click-prev, #example9-click-next{
	text-decoration: none;
	display:block;
	position:relative;
	float:left;
	width:36px;
	height:16px;
	font-size:12px;
	padding:5px 0px 5px 10px;
	top: -35px;
}
[id^="example9-"]{
	display:block;
	position:absolute;
	width:45px;
	height:55px;
}
.example8a-inside {
	display:block;
	position:relative;
	float:left;
}
.example7a-inside {
	display:block;
	position:relative;
	float:left;
	clear:both;
}

.no-touch [id^="example9-"]:hover,[id^="example9-"].active{
	background:#92e8ff;
}
#example9-click-next {
}
#mycounter {
	text-decoration: none;
	display:block;
	position:relative;
	float:left;
	font-size:12px;
	padding:5px 0px 5px 10px;
	margin:6px 0px;
}
/* scrolls */
#example9-click-scrollOut{
	color:#3c3c3c;
	background: #fcfcfc;
	display:block;
	position:relative;
	float:left;
	width:370px;
	height:19px;
	background:#e2e2e2;
	padding:0px;
	border:0px solid #3c3c3c;
	top: -30px;
}
#example9-click-scrollIn{
	color:#3c3c3c;
	border:2px solid #b3b3b3;
	background: #fcfcfc;
	display:block;
	position:relative;
	width:60px;
	height:15px;
	background:#fcfcfc;
	margin:0px;
	padding:0px;
}
no-touch #example9-click-scrollIn:hover, #example9-click-scrollIn.active{
	background:#92e8ff;
}
/* drags */
#example9-click-dragOut{
	border-radius:20px;
	overflow:hidden;
	float:left;
	width:490px;
	height:190px;
	left:0px;
	margin:auto;
	padding:0px;
	border:2px solid #e2e2e2;
	position: relative;
}
#example9-click-dragIn{
	display:block;
	position:absolute;
	width:1200px;
	height:190px;
	margin:auto;
	padding:0px;
	
}

#example9-click-dragOut {
	opacity:0;
	filter:alpha(opacity=0);
	border-radius:0px;
	width:520px;
	height:210px;
	margin: auto;
}
#example9-click-dragIn {
	opacity:0;
	filter:alpha(opacity=0);
	border-radius:0px;
	height:210px;
	margin: auto;
}
div .apptext{
	border: 0 none;
    clear: both;
    display: block;
    height: 35px;
    margin-left: -12px;
    margin-top: 4px;
}
#headerTitle{
 width: 230px;
 margin: auto;
 font-size: 21px;
}
</style>

      <script type="text/javascript" src="<%=basePath%>js/jquery.1.7.2.min.js"></script>
      <script type="text/javascript" src="<%=basePath%>js/jquery-ui-1.8.16.custom.min.js"></script>
      <script type="text/javascript" src="<%=basePath%>js/mg.js"></script>
      <script type="text/javascript" src="<%=basePath%>js/jquery.transform.min.js"></script>
	  <script type="text/javascript" src="<%=basePath%>js/jquery.bez.min.js"></script>
      <script type="text/javascript">
      	var bez = $.bez([.19,1,.22,1]); var bezcss = ".19,1,.22,1";
      </script> <!-- bezier animations -->
</head>
<body>
	<script type="text/javascript">
		if('ontouchstart' in document){}
		else{ 
		document.getElementsByTagName("body")[0].className = "no-touch"; 
		}
	</script> <!-- remove css hover on touch devices -->


<div style="display:block;">
    <div id="headerTitle">LearngoApp 产品导航</div>
	<div id="example9-click-dragOut"><div id="example9-click-dragIn"></div></div>
	<div id="example9-item-0"><a href="#" class="apptext"> 选择题 </a> </div>
	<div id="example9-item-1"><a href="#" class="apptext"> 判断题 </a></div>
	<div id="example9-item-2"><a href="#" class="apptext"> App </a></div>
	<div id="example9-item-3"><a href="#" class="apptext"> sabrina </a></div>
	<div id="example9-item-4"><a href="#" class="apptext"> sabrina </a></div>
	<div id="example9-item-5"><a href="#" class="apptext"> sabrina </a></div>
	<div id="example9-item-6"><a href="#" class="apptext"> App </a></div>
	<div id="example9-item-7"><a href="#" class="apptext"> leon </a></div>
	<div id="example9-item-8"><a href="#" class="apptext"> sabrina </a></div>
	<div id="example9-item-9"><a href="#" class="apptext"> sabrina </a></div>
	<div id="example9-item-10"><a href="#" class="apptext"> sabrina </a></div>
	<div id="example9-item-11"><a href="#" class="apptext"> sabrina </a></div>
	<div id="example9-item-12"><a href="#" class="apptext"> sabrina </a></div>
	<div id="example9-item-13"><a href="#" class="apptext"> sabrina </a></div>
	<div id="example9-item-14"><a href="#" class="apptext"> sabrina </a></div>
	
	<div style="clear:both;"></div>
	<div id="example9-click-prev">Prev</div>
	<div id="example9-click-scrollOut"><div id="example9-click-scrollIn"></div></div>
	<div id="example9-click-next">Next</div>
</div>
	
<div style="clear:both;height:200px;"></div>

<script type="text/javascript">
var example9 = new Mg({
	reference:"example9",
	click:{
		activated:[6],
		cycle:true,
		interactive:true,
		multiLess:7, multiPlus:7,
		scrollWheel:true, dragWheel:true
		
	}
});
example9.click.onEvent = function(){
	var arr = this.multiActivated;
	var alpha = Math.PI*2/(arr.length);
	var xradius = 200;
	var yradius = 60;
	for (var i=0;i<arr.length;i++){
		var path = $("#"+this.reference+"-item-"+ arr[i]);
		if(arr[i]==this.activated){
			var depth = 0;
		} else {
			var depth = example9.mapDistanceReverse(this.multiPlus, i, arr.length, 0);
		}
		//
		var theta = alpha*(this.activated-arr[i]-depth/6)+1.6; // -depth/6 will give additional distance based on depth: it gives space for activated
		var x = 20+xradius+Math.cos(theta)*xradius;
		var y = yradius+Math.sin(theta)*yradius;
		var w = h = y/4;
		var scale = 0.2+y/140;
		if(arr[i]==this.activated){scale = 1.5; y-=30;}
		path.clearQueue().stop().css("z-index", Math.round(y/10));
		if(perspective && transition){
			path.css(transition.css, transform.css+" 1.3s cubic-bezier("+bezcss+")");
			path.css(transform.css, "translate3d("+x+"px,"+y+"px,0) scale("+scale+")");
		}else{
			path.animate({transform:'translate('+x+','+y+') scale('+scale+')'},{queue:true, duration:1300, specialEasing: {transform:bez}});
		}
	}
	$("#"+this.reference+"-item-"+this.deactivated).removeClass("active");
	$("#"+this.reference+"-item-"+this.activated).addClass("active").css("z-index",100);
}

example9.click.scrollClick = function(){
	var path = $("#"+this.reference+"-click-scrollIn");
	path.addClass("active");
}
example9.click.scrollMove = function(){
	var path = $("#"+this.reference+"-click-scrollIn");
	if(perspective && transition){
		path.css(transition.css, transform.css+" 0s");
		path.css(transform.css, "translate3d("+this.scrollPosition+"px,0,0)");
	}else{
		path.clearQueue().stop().animate({left:this.scrollPosition},{queue:true, duration:0, specialEasing: {left:bez}});
	}
}
example9.click.scrollRelease = function(){
	var path = $("#"+this.reference+"-click-scrollIn");
	path.removeClass("active");
	if(perspective && transition){
		path.css(transition.css, transform.css+" 1.2s cubic-bezier("+bezcss+") 0s");
		path.css(transform.css, "translate3d("+this.scrollPosition+"px,0,0)");
	}else{
		path.clearQueue().stop().animate({left:this.scrollPosition},{queue:true, duration:300, specialEasing: {left:bez}});
	}
}
example9.click.dragMove = function(){
	var path = $("#"+this.reference+"-click-dragIn");
	if(perspective && transition){
		path.css(transition.css, transform.css+" 0s");
		path.css(transform.css, "translate3d("+this.dragPosition+"px,0,0)");
	}else{
		path.clearQueue().stop().animate({left:this.dragPosition},{queue:true, duration:0, specialEasing: {left:bez}});
	}
}
example9.click.dragRelease = function(){
	var path = $("#"+this.reference+"-click-dragIn");
	if(perspective && transition){
		path.css(transition.css, transform.css+" 1.2s cubic-bezier("+bezcss+") 0s");
		path.css(transform.css, "translate3d("+this.dragPosition+"px,0,0)");
	}else{
		path.clearQueue().stop().animate({left:this.dragPosition},{queue:true, duration:300, specialEasing: {left:bez}});
	}
}
example9.init();
</script>
</body>
</html>